<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素 心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/* 自适应居中 */
				margin: 300px auto;
				transform: rotate(135deg);
				/* 透明度属性：属性值0-1范围值 */
				opacity: .7;
				/* 滤镜属性：光晕：下阴影 
				drop-shadow(x值 y值 模糊范围 颜色)*/
				filter: drop-shadow(0 0 50px #ff557f);
				/* 动画属性 :关键帧名称  过度时间 过度方式 无限循环*/
				animation:heart  1s linear infinite;
			}
			/* 伪类选择器：给元素附加效果的选择器
			 语法：div:horer{}当鼠标悬停到div上实线的效果
			 要求鼠标悬停到中心位置改成圆
			 选择器:before在元素之前添加文本  常用与content:""
			 选择器:after在元素之后添加文本   常用与content:""
			 
			 */
			div:after{
				content:"";
				/* 显示属性 
				display: block;行转块
				display:inline;块转行
				display:none;元素消失*/
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				/* 相对定位 */
				position: relative;
				left:-100px;
				top: -200px;
				}
				div:before{
					content: "";
					display:block;
					width: 200px;
					height: 200px;
					background-color: #e4393c;
					border-radius: 50%;
					position: relative;
					top: 100px;
					
				}
				/* 动画 */
				/* 1.创建一个关键帧-手翻书 */
				@keyframes heart{
					/* 三个画面 ：1.等比例出现，防止跳帧2.缩小比例3.放大比例*/
					0%{
						/* 转换属性：缩放 
						transform旋转复合属性 旋转缩放*/
						transform:rotate(135deg) scale(1) ;
					}
					30%{
						transform:rotate(135deg) scale(.8) ;
					}
					100%{transform:rotate(135deg) scale(1.2) ;
					}
				}
		</style>
	</head>
	<body>
		<!-- 画一颗心 html1个元素 -->
		<div></div>
		<!-- html 元素的分类 ：按照元素的特点分为： 
		           块元素：可以设置高宽，独占一行，典型的块元素div
				   行元素：不可以设置高宽,可以在一行内显示：典型的行元素span
				   文本内容属于行元素
				   行内块元素：典型行内快：可以设置高宽，也可以在一行内显示，典型行块元素img-->
		<!-- 音乐 -->
		<audio src="renxi.mp3"></audio>
	</body>
</html>